<template>
  <div class="page-box-row-left">
    <FormBlock
      :title="$t('module.orgManage.orgTree')"
      direction="column"
      style="width: 22%; overflow-x: hidden;"
    >
      <user-organization
        :query="query"
        @handleOnNodeClick="handleOnNodeClick"
        @selsectOrg="selsectOrg"
      ></user-organization>
    </FormBlock>
    <FormBlock :title="$t('module.appManage.appList')" direction="column">
      <org-app-list
        :orgData="currentOrg"
        :orgId="currentOrgId"
        :orgName="currentOrgName"
        :orgPath="currentOrgPath"
        :topNode="topNode"
      />
    </FormBlock>
  </div>
</template>
<script>
import UserOrganization from "@/components/common/UserOrganization.vue";
import orgAssignRoleAPI from "@/api/orgAssignRoleAPI.js";
import OrgAppList from "./OrgAppList.vue";
import locales from "./locales.js";

export default {
  name: "org-assign-role",
  components: { OrgAppList, UserOrganization },
  props: {},
  mixins: [locales],

  data() {
    return {
      topNode: false,
      searchDeptValue: "",
      baseData: [],
      treeProps: {
        label: "orgName",
        children: "childrenDept",
        isLeaf: "isLeaf"
      },
      currentOrg: [],
      currentOrgId: "",
      currentOrgName: "",
      currentOrgPath: "",
      searchValue: "",
      searchResult: [],
      searchResultNode: [],
      pressCount: 0,
      isShowSpin: false,
      // 根据orgType设置相应svg地址("\"是转义字符,需用"\\"代替，否则"\"无法解析为\)
      embedSvg: orgType => {
        let svgUrl;
        switch (+orgType) {
          case 1:
            svgUrl = "static\\images\\enterprise.svg";
            break;
          case 2:
            svgUrl = "static\\images\\company.svg";
            break;
          case 10:
            svgUrl = "static\\images\\department.svg";
            break;
          default:
            svgUrl = "";
        }
        return svgUrl;
      },
      query: {
        orgPath: "",
        orgTypeFilter: 3,
        enabled: ""
      }
    };
  },
  computed: {},
  created: function() {
    // 此接口不需要了
    // this._getOrgTreeList();
  },
  methods: {
    // 默认获取所有节点、点击获取下一级节点
    _getOrgTreeList(orgId, resolve) {
      orgAssignRoleAPI.queryOrgTree({ nameOrCode: this.searchDeptValue }).then(response => {
        let data = response;
        if (orgId) {
          resolve(data);
        } else {
          this.baseData = data;
          //默认选中第一个节点，不加nextTick的话，this.baseData刚有数据，树节点还没渲染完，导致默认选中第一个节点的样式不生效
          this.currentOrgId = data[0].orgId;
          this.currentOrgName = data[0].orgName;
          this.currentOrgPath = data[0].orgPath;
          this.$nextTick(() => {
            this.selectFirstOrg();
          });
        }
      });
    },
    selectFirstOrg() {
      if (this.baseData.length > 0) {
        // 当前行加选中效果
        // this.$refs["tree"].setCurrentKey(this.baseData[0].orgId);
      }
    },
    // onNodeClick(data) {
    //   this.currentOrg = [data];
    //   this.currentOrgId = data.orgId;
    //   this.currentOrgName = data.orgName;
    //   this.currentOrgPath = data.orgPath;
    // },
    handleOnNodeClick(data) {
      this.currentOrg = [data];
      this.currentOrgId = data.orgId;
      this.currentOrgName = data.orgName;
      this.currentOrgPath = data.orgPath;
      // 如果parentId为null, 则为顶层节点
      if (!data.parentId) {
        this.topNode = true;
      } else {
        this.topNode = false;
      }
    },
    selsectOrg(data) {
      this.currentOrg = [data];
      this.currentOrgId = data.orgId;
      this.currentOrgName = data.orgName;
      this.currentOrgPath = data.orgPath;
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
.page-box-row-left {
  .tree-box {
    height: calc(~"100% - 32px") !important;
    margin-top: 10px;
  }
  .node-svg {
    position: relative;
    top: 1px;
  }
  .node-label {
    margin-left: 3px;
  }
}
</style>
